<template>
   <view class="uv-page">
      <view class="uv-border-left uv-border-top uv-page__grid">
         <view
            @tap="selectIcon(item.name)"
            class="uv-page__grid__item uv-border-bottom uv-border-right"
            v-for="(item, index) in iconList"
            :key="index"
         >
            <view class="uv-page__grid__item__icon">
               <uv-icon :name="item.name" size="30" color="#909399"></uv-icon>
            </view>
            <text class="uv-page__grid__item__text">{{ item.name }}</text>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { iconList } from './icon';

const selectIcon = (name: string) => {
   uni.setClipboardData({
      data: name,
      success: () => {
         uni.showToast({
            title: '复制成功',
         });
      },
   });
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 14rpx;

   &__grid {
      @include flex(row);
      flex-wrap: wrap;

      &__item {
         @include flex(column);
         align-items: center;
         justify-content: center;
         height: 240rpx;
         /* #ifndef APP-NVUE */
         width: 33.3%;
         box-sizing: border-box;
         /* #endif */
         /* #ifdef APP-NVUE */
         width: 240rpx;
         /* #endif */
         padding: 0 5px;

         &__icon {
            height: 130rpx;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: row;
            align-items: flex-end;
         }

         &__text {
            color: $uv-tips-color;
            /* #ifndef APP-NVUE */
            word-wrap: break-word;
            word-break: break-all;
            /* #endif */
            font-size: 14px;
            height: 110rpx;
         }
      }
   }
}
.uv-border-top {
   border-top-width: 0.5px !important;
   border-color: $uv-border-color !important;
   border-top-style: solid;
}

.uv-border-left {
   border-left-width: 0.5px !important;
   border-color: $uv-border-color !important;
   border-left-style: solid;
}

.uv-border-right {
   border-right-width: 0.5px !important;
   border-color: $uv-border-color !important;
   border-right-style: solid;
}

.uv-border-bottom {
   border-bottom-width: 0.5px !important;
   border-color: $uv-border-color !important;
   border-bottom-style: solid;
}

.uv-border-top-bottom {
   border-top-width: 0.5px !important;
   border-bottom-width: 0.5px !important;
   border-color: $uv-border-color !important;
   border-top-style: solid;
   border-bottom-style: solid;
}
</style>
